<template>
  <el-dialog title="套餐查看" :visible.sync="dialogVisible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="dialogVisible = false">关闭页面</el-button>
    <el-divider content-position="left">查询条件</el-divider>
    <el-form inline label-width="80px" ref="dataForm" :model="dataForm">
      <el-row>
        <el-form-item label="套餐标题" prop="title">
          <el-input style="width: 220px;" v-model="dataForm.title"></el-input>
        </el-form-item>
        <el-form-item label="套餐分类" prop="type">
          <el-select v-model="dataForm.type" clearable>
            <el-option label="框镜销售" value="4"></el-option>
            <el-option label="隐形销售" value="3"></el-option>
            <el-option label="辅料销售" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐状态" prop="auditStatus">
          <el-select v-model="dataForm.auditStatus" clearable>
            <el-option label="未失效" value="0"></el-option>
            <el-option label="已失效" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐日期">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker type="date" v-model="dataForm.startTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item>
              <el-date-picker type="date" v-model="dataForm.endTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        <el-button type="info" icon="el-icon-delete" @click="clearDataForm">清空</el-button>
      </el-row>
    </el-form>
    <el-divider content-position="left">查询信息</el-divider>
    <el-table :data="dataList" border v-loading="dataListLoading">
      <el-table-column prop="title" label="套餐标题"></el-table-column>
      <el-table-column prop="type" label="套餐分类"></el-table-column>
      <el-table-column prop="allowDiscount" label="折上折"></el-table-column>
      <el-table-column prop="createTime" label="套餐日期"></el-table-column>
      <el-table-column prop="startTime" label="生效日期"></el-table-column>
      <el-table-column prop="endTime" label="截止日期"></el-table-column>
      <el-table-column prop="auditStatus" label="失效状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-collection" @click="checkDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
    </span>
    <!-- 套餐详情 -->
    <meal-detail v-if="mealDetailVisible" ref="mealDetail"></meal-detail>
  </el-dialog>
</template>

<script>
  import {filterParams} from '@/util/tools'
  import {setMealFetchList} from '@/api/eims/set-meal'
  import MealDetail from '@/views/eims/setmeal/setmeal-detail'
  export default {
    props: [],
    data() {
      return {
        dataForm: {
        },
        dialogVisible: false,
        dataList: [{groupName:'测试数据',id:'1'}],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        mealDetailVisible: false
      }
    },
    components:{
      MealDetail
    },
    methods: {
      init() {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.getDataList()
        })
      },
      checkDetail(id) {
        this.mealDetailVisible = true
        this.$nextTick(() => {
          this.$refs.mealDetail.init(id)
        })
      },
      // 获取数据列表
      getDataList() {
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        setMealFetchList(Object.assign(params1,params2)).then(response => {
					if(response.data.code == '0'){
					  this.dataList = response.data.data.records
					}else{
					  this.$message.error(response.data.msg)
					}
        })
      },
      // 清空数据列表
      clearDataForm() {
        for(let item in this.dataForm){
          this.dataForm[item] = ''
        }
      }
    }
  }
</script>

<style>
</style>
